<template>
  <view class="card">
    <view class="title u-flex u-flex-between">
      <view class="u-flex">
        <u--image
          :src="$z.imgsrc('work-icon.png')"
          width="36rpx"
          height="36rpx"
        ></u--image>
        <view class="text">我的工作台</view>
      </view>

      <!-- <u-icon name="arrow-right"></u-icon> -->
    </view>
    <view class="list">
      <view
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="itemtap(item)"
      >
        <u--image
          :src="$z.imgsrc(item.src)"
          width="48px"
          height="48px"
        ></u--image>
        <view class="text">{{ item.text }}</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          text: "客户",
          src: "work-icon1.png",
          page: "/pagescustomer/customer/my-customer",
        },
        {
          text: "拍照下单",
          src: "work-icon2.png",
          page: "/pagescustomer/customer/photo-order",
        },
        {
          text: "日程创建",
          src: "work-icon3.png",
          page: "/pagesform/form/schedule-form",
        },
        {
          text: "发票管理",
          src: "work-icon4.png",
          page: "/pagesecharts/jcCustomInvoice/jcCustomInvoice",
        },
        // {
        //   text: "账期客户",
        //   src: "f411331dfc9c4e71a0b2e0260fb09714.png",
        // },
        {
          text: "客户订单",
          src: "work-icon5.png",
          page: "/pagescustomer/customer/order-list",
        },
      ],
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    init() {},
    itemtap(item) {
      if (item.page) {
        uni.navigateTo({
          url: item.page,
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.card {
  margin: 14rpx 18rpx;
  background-color: #fff;
  border-radius: 8rpx;

  // padding: 0 24rpx;
  // padding-bottom: 16rpx;
  .title {
    font-size: 28rpx;
    font-weight: bold;
    height: 88rpx;
    padding: 0 24rpx;

    .text {
      padding-left: 12rpx;
      line-height: 1;
    }
  }

  .list {
    display: flex;
    flex-wrap: wrap;

    .item {
      width: 25%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .text {
        color: #171a1d;
        font-size: 24rpx;
        padding: 8rpx 0;
        margin-bottom: 24rpx;
      }
    }
  }
}
</style>
